feat(prefer-use-template-ref): support auto-fix#2983
feat(prefer-use-template-ref): support auto-fix#29839romise wants to merge 10 commits intovuejs:masterfrom
Conversation
🦋 Changeset detectedLatest commit: e07e5be The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
# Conflicts: # lib/rules/prefer-use-template-ref.js
FloEdelmann
left a comment
FloEdelmann
left a comment
There was a problem hiding this comment.
Looks good to me, thank you 🙂
There was a problem hiding this comment.
Pull request overview
This PR implements auto-fix functionality for the prefer-use-template-ref rule, which automatically converts ref() and shallowRef() calls to useTemplateRef('name') when they are used as template refs. The implementation intentionally does not auto-import useTemplateRef to avoid conflicts with users who rely on unplugin-auto-import.
- Adds
fixable: 'code'metadata to enable auto-fixing - Implements fixer logic that correctly handles TypeScript type arguments/parameters
- Updates all test cases with expected outputs and enhanced error location information
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
lib/rules/prefer-use-template-ref.js |
Adds fixable metadata and implements the fix function that replaces ref/shallowRef calls with useTemplateRef, preserving type arguments |
tests/lib/rules/prefer-use-template-ref.js |
Adds output expectations for all invalid test cases and includes endLine/endColumn in error assertions; adds TypeScript test case |
docs/rules/prefer-use-template-ref.md |
Adds wrench icon notation and fix attribute to code blocks to indicate auto-fix capability |
docs/rules/index.md |
Updates the rules table to show the wrench icon for this rule |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </template> | ||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| const root = useTemplateRef('root'); |
There was a problem hiding this comment.
I think autofixes shouldn't break source code.
I think adding import { useTemplateRef } from 'vue' will inconvenience users who use unplugin-auto-import, but I think not adding import { useTemplateRef } from 'vue' will break it for users who don't use unplugin-auto-import.
Could you change it to add import { useTemplateRef } from 'vue'?
Or could you change it to a suggestion instead of autofix?
There was a problem hiding this comment.
That makes sense. I'll have a try.
FloEdelmann
changed the title
|
Would it make sense to add an option to control whether imports are included during autofix? |
3 participants
Re-implement of #2632 (closes #2632). (I really love this feature!)
But this PR doesn't insert
import { useTemplateRef } from 'vue'automatically.Because I think that falls outside the scope of this rule. Additionally, some users rely on
unplugin-auto-importand would have to remove the unnecessary import to maintain clean imports.Please merge #2982 first.